<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<!-- <view class="back iconfont icon-gengduo-copy" @tap="backPage"></view> -->
			<view class="sweep iconfont icon-caiyouduo_saoyisao"></view>
			<view class="logo">我的</view>
			<view class="sweep"></view>
		</view>

		<view class="bg_box">
			<image class="bg01" src="../../static/img01/bg09.png" mode="widthFix"></image>
			<view class="bg_content">
				<view class="avatar">
					<image src="../../static/img01/tx01.png" mode="scaleToFill"></image>
					<view class="play iconfont icon-bianji1"></view>
				</view>
				<view class="name_box">武夷岩茶</view>
				<view class="standing_box">
					<image src="../../static/img01/bg10.png" mode="widthFix"></image>
					<view class="standing">掌柜</view>
				</view>
				
				<view class="menu_box">
					<view class="menu" data-url="/pages/personalcenter/balance" @click="gotopage">
						<view class="text">余额(元)</view>
						<view class="num">10.8</view>						
					</view>
					<view class="menu" data-url="/pages/personalcenter/vouchers" @click="gotopage">
						<view class="text">抵用券</view>
						<view class="num">10.8</view>						
					</view>
					<view class="menu" data-url="/pages/personalcenter/growDetails" @click="gotopage">
						<view class="text">成长值</view>
						<view class="num">10.8</view>						
					</view>
					
				</view>
				
				<view class="list_box">
					<view class="list" data-url="/pages/order/order" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu05.png" mode="widthFix"></image>
						</view>
						<view class="text">订单管理</view>
						<view class="arrow iconfont icon-jiantouyou"></view>
					</view>
					<view class="list" data-url="/pages/personalcenter/team" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu06.png" mode="widthFix"></image>
						</view>
						<view class="text">我的团队</view>
						<view class="arrow iconfont icon-jiantouyou"></view>
					</view>
					<view class="list" data-url="/pages/personalcenter/moneyDetails" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu07.png" mode="widthFix"></image>
						</view>
						<view class="text">资金明细</view>
						<view class="arrow iconfont icon-jiantouyou"></view>
					</view>
					<view class="list" data-url="/pages/tree/tree" @click="gotopage02">
						<view class="icon">
							<image src="../../static/menu/menu08.png" mode="widthFix"></image>
						</view>
						<view class="text">种植中心</view>
						<view class="arrow iconfont icon-jiantouyou"></view>
					</view>
					<view class="list" data-url="/pages/personalcenter/share" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu09.png" mode="widthFix"></image>
						</view>
						<view class="text">分享好友</view>
						<view class="arrow iconfont icon-jiantouyou"></view>
					</view>
					<view class="list" data-url="/pages/personalcenter/callMe" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu10.png" mode="widthFix"></image>
						</view>
						<view class="text">联系我们</view>
						<view class="arrow iconfont icon-jiantouyou"></view>
					</view>
					<view class="list" data-url="/pages/personalcenter/systemSet" @click="gotopage">
						<view class="icon">
							<image src="../../static/menu/menu11.png" mode="widthFix"></image>
						</view>
						<view class="text">系统设置</view>
						<view class="arrow iconfont icon-jiantouyou"></view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				select: 0,
				info: '',
			};
		},
		onLoad(options) {
			let that = this;
		},
		onShow() {
			let that = this;
			//that.loadData()
		},
		methods: {
			loadData() {
				let that = this;
				that.Net._get('user/addresses', {
					per_page: '10',
					page: that.page
				}, res => {
					if (res.code == 200) {
						//console.log(res)
						that.address = res.data.data;
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			gotopage02(e) {
				let url = e.currentTarget.dataset.url;
				uni.switchTab({
					url: url
				});
			}



		},

	};
</script>

<style>
	.header{
		height: 13.5vw;
		display: flex;
		align-items: center;
		background-color: transparent !important;		
	}
	
	.scrrolHeader{
		background-color: #024D4F !important;
	}
	
	.header .sweep{
		font-size: 6vw;
		color: #fff;
		width: 13vw;
		text-align: center;
	}
	
	.header .logo{
		flex: 1;
		text-align: center;
		text-align: center;
		line-height: 13.5vw;
		font-size: 4.5vw;
		color: #fff;
		font-weight: bold;
	}
	
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
		display: block;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(20vw + var(--status-bar-height));
		z-index: 99;
		padding-bottom: 15vw;
	}
	
	.avatar{
		width: 24vw;
		height: 24vw;
		border-radius: 50%;
		margin: 0 auto;
		position: relative;
	}
	
	.avatar image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.avatar .play{
		width: 7vw;
		height: 7vw;
		font-size: 4vw;
		border-radius: 50%;
		background-color: #DA5948;
		color: #fff;
		position: absolute;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.name_box{
		width: 100%;
		text-align: center;
		font-size: 4vw;
		font-weight: bold;
		color: #fff;
		margin-top: 2vw;
	}
	
	.standing_box{
		width: 15%;
		margin: 2vw auto 0;
		position: relative;
	}
	
	.standing_box image{
		width: 100%;
		display: block;
	}
	
	.standing_box .standing{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		font-size: 3.2vw;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.menu_box {
		width: 100%;
		margin: 0 auto;
		display: flex;
		padding: 8vw 0;
		border-radius: 2vw;
		margin-top: 4vw;
		background-color: #fff;
		border-radius: 4vw;
	}
	
	.menu_box .menu {
		flex: 1;
	}
	
	.menu_box .menu .num {
		font-size: 5vw;
		font-weight: bold;
		color: #024D50;
		text-align: center;
		margin-top: 1vw;
	}
	
	.menu_box .menu .text {
		font-size: 3.2vw;
		color: #757880;
		text-align: center;
		
	}
	
	.menu_box .menu:nth-child(1) .num{
		color: #DB5A47;
	}
	
	.list_box{
		width: 100%;
		background-color: #fff;
		border-radius: 4vw;
		padding: 5%;
		margin-top: 4%;
	}
	
	.list_box .list{
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 8vw;
	}
	
	.list_box .list:last-child{
		margin-bottom: 0;
	}
	
	.list_box .list .icon{
		width: 6vw;
		margin-right: 2vw;
	}
	
	.list_box .list .icon image{
		width: 100%;
		display: block;
	}
	
	.list_box .list .text{
		flex: 1;
		font-size: 3.9vw;
		font-weight: bold;
		color: #333;
	}
	
	.list_box .list .arrow{
		font-size: 4vw;
		color: #A5A7AD;
	}
</style>